<template>
  <a-table
    class="antableClass"
    ref="table"
    size="middle"
    :columns="columns"
    :dataSource="dataSource"
    :pagination="false"
    :scroll="{ y: 230 }"
  >
    <template slot="relateLinkCnField" slot-scope="text, record, index">
      <div style="width: 100%;min-height: 40px;display: flex;justify-content: flex-start;align-items: center;"
       @drop.prevent="dropItemHandler($event, 'relateLinkCnField', index)"
       @dragover.prevent="dragoverHandler($event)">
        <span>{{ text || ' ' }}</span>
      </div>
    </template>
    <template slot="attachLinkCnField" slot-scope="text, record, index">
      <div style="width: 100%;min-height: 40px;display: flex;justify-content: flex-start;align-items: center;"
       @drop.prevent="dropItemHandler($event, 'attachLinkCnField', index)"
       @dragover.prevent="dragoverHandler($event)">
        <span>{{ text || ' ' }}</span>
      </div>
    </template>
    <template slot="attachTableCnName" slot-scope="text, record, index">
      <div style="width: 100%;min-height: 40px;display: flex;justify-content: flex-start;align-items: center;"
       @drop.prevent="dropItemHandler($event, 'attachTableCnName', index)"
       @dragover.prevent="dragoverHandler($event)">
        <span>{{ text || ' ' }}</span>
      </div>
    </template>
    <template slot="action" slot-scope="text, record, idx">
      <a-popconfirm v-if="!record.editable" title="确定删除吗?" @confirm="() => handleDelete(record.id, idx)">
        <a-icon style="cursor: pointer;" type="delete" />
      </a-popconfirm>
    </template>
    <template slot="footer">
      <div class="drag_target" @drop.prevent="dropHandler($event)" @dragover.prevent="dragoverHandler($event)">
        <a-icon type="plus" class="darg-icon" />
        <span class="darg-text">请拖拽上侧关联字段到此处</span>
      </div>
    </template>
  </a-table>
</template>

<script>
export default {
  props: ['dataSource'],
  data() {
    return {
      columns: [
        {
          title: '序号',
          dataIndex: '序号',
          width: 70,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '关联表',
          dataIndex: 'relateTableCnName',
        },
        {
          title: '关联表字段',
          dataIndex: 'relateLinkCnField',
          scopedSlots: { customRender: 'relateLinkCnField' }
        },
        {
          title: '附表',
          dataIndex: 'attachTableCnName',
          scopedSlots: { customRender: 'attachTableCnName' }
        },
        {
          title: '附表字段',
          dataIndex: 'attachLinkCnField',
          scopedSlots: { customRender: 'attachLinkCnField' }
        },
        {
            dataIndex: 'action',
            align: 'center',
            title: '操作',
            key: 'action',
            scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: '',
        add: '',
        remove: '',
        edit: ''
      },
      editaing: false,
      disableMixinCreated: true,
    }
  },
  methods: {
    handleDelete(id, idx) {
      this.$emit('Delete', id, idx)
    },
    dropItemHandler(event, type, idx) {
      this.$emit('dropItemHandler', type, idx);
    },
    dropHandler() {
      this.$emit('DropHandler')
    },
    getPopupContainer() {
      return document.body
    },
    dragoverHandler(ev) {
      ev.dataTransfer.dropEffect = 'move'
    },
    handleChange(value, id, col, idx) {
      this.$emit('DataChange', id, value, col, idx)
    },
    //  删除
    handleEdit(id, idx) {
      this.editaing = true
      this.$emit('Edit', id, idx)
    },
    Save(id, idx) {
      this.editaing = false
      this.$emit('SaveData', id, idx)
    },
    Cancel(id, idx) {
      this.editaing = false
      this.$emit('CancelData', id, idx)
    },
    handleUp(id, idx) {
      this.$emit('Up', id, idx)
    },
    handleDown(id, idx) {
      this.$emit('Down', id, idx)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.ant-table-scroll {
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}
/deep/.ant-table-footer {
  padding: 0;
}
.drag_target {
  padding: 30px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f9fdff;
  .darg-icon {
    font-size: 40px;
    color: #d8e1f7;
  }
  .darg-text {
    color: #cdcece;
  }
}

.active {
  .darg-icon {
    color: #95b1f8;
  }
}

.edit-icon {
  margin-left: 5px;
  cursor: pointer;
}
</style>
